<template>
	<view class="busines-mod-head">
		<view>
			<text>户名：</text>
			<text>{{detailsData.yhmc}}</text>
		</view>
		<view>
			<text>户号：</text>
			<text>{{detailsData.yhbh}}</text>
		</view>
		<view>
			<text>用电地址：</text>
			<text>{{detailsData.yhdz}}</text>
		</view>
		<view>
			<text>预付余额：</text>
			<text>￥{{detailsData.dqjy}}</text>
		</view>
		<view>
			<text>总欠费：</text>
			<text>￥{{detailsData.dqqf}}</text>
			<uni-tag v-if="show && detailsData.dqqf > 0" text="缴纳欠费" type="warning"
				style="margin-left: 20px; padding: 10rpx 20rpx;"
				@click="GOTO('/pages/bspsd/business/payfees/payover?yhbh=' + detailsData.yhbh)" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { HlwYxyh } from "@/api/tables/HlwYxyh";
	import { fetchOneYhJbxxByYhbh } from "@/api/request/fetchOneYhJbxxByYhbh";
	import { ref, onBeforeMount, watch } from 'vue';
	const props = defineProps({
		yhbh: {
			type: String,
			default: ""
		},
		show: {
			type: Boolean,
			default: true
		}
	})
	const GOTO = (url : string) => { uni.navigateTo({ url: url }) }
	let detailsData = ref<HlwYxyh>({});
	
	onBeforeMount(() => {
		getDetailsData()
	})
	
	watch(
		() => props.yhbh, 
		() => {getDetailsData()}
	)
	
	function getDetailsData() {
		if (props.yhbh) {
			fetchOneYhJbxxByYhbh({
				data: {
					yhbh: props.yhbh
				},
				success: (res) => {
					detailsData.value = res
				},
				fail: (code, message) => {
					console.log(code, message)
				}
			})
		}
	}

	
</script>

<style lang="scss" scoped>
	.nodata {
		color: #aaa;
		font-size: 40rpx;
	}
</style>